` / \u5177\u540d\u63d2\u69fd |\n\n---\n\n## \u4e03\u3001\u72b6\u6001\u7ba1\u7406\n\n| \u5bf9\u6bd4 | React \u751f\u6001 | Vue \u751f\u6001 |\n|------|-----------|----------|\n| \u4e3b\u6d41 | Redux / Zustand / Jotai | Pinia\uff08\u5b98\u65b9\uff09 |\n| \u7279\u70b9 | \u9700\u4e2d\u95f4\u4ef6\u5904\u7406\u5f02\u6b65 | \u539f\u751f\u652f\u6301 action \u5f02\u6b65 |\n| \u4ee3\u7801\u91cf | \u8f83\u591a\uff08\u6837\u677f\u4ee3\u7801\uff09 | \u8f83\u5c11 |\n| DevTools | Redux DevTools | Vue DevTools |\n\n---\n\n## \u516b\u3001\u751f\u547d\u5468\u671f\u5bf9\u6bd4\n\n| React\uff08class\uff09 | React\uff08hooks\uff09 | Vue\uff08Options\uff09 |\n|---------------|----------------|----------------|\n| componentDidMount | useEffect(fn, []) | mounted |\n| componentDidUpdate | useEffect(fn, [deps]) | updated |\n| componentWillUnmount | useEffect(() => fn, []) | beforeUnmount |\n| shouldComponentUpdate | React.memo | computed\uff08\u81ea\u52a8\uff09 |\n\n---\n\n## \u4e5d\u3001\u6027\u80fd\u5bf9\u6bd4\n\n| \u7ef4\u5ea6 | React | Vue |\n|------|-------|-----|\n| \u66f4\u65b0\u7c92\u5ea6 | \u7ec4\u4ef6\u7ea7 | \u7ec4\u4ef6\u7ea7 + \u7cbe\u786e\u5230\u53d8\u91cf |\n| \u4f18\u5316\u624b\u6bb5 | useMemo/useCallback/memo | \u81ea\u52a8\u8ffd\u8e2a\uff0c\u8f83\u5c11\u624b\u5199\u4f18\u5316 |\n| \u865a\u62df DOM | \u5168\u91cf diff | \u7f16\u8bd1\u65f6\u4f18\u5316\uff08\u9759\u6001\u63d0\u5347\u3001\u8865\u4e01\u6807\u8bb0\uff09 |\n| \u9996\u5c4f\u4f53\u79ef | ~40KB\uff08react + react-dom\uff09 | ~16KB\uff08runtime-only\uff09 |\n\n---\n\n## \u5341\u3001\u751f\u6001\n\n| \u9886\u57df | React | Vue |\n|------|-------|-----|\n| SSR/SSG | Next.js | Nuxt |\n| \u79fb\u52a8\u7aef | React Native | uni-app / taro |\n| \u684c\u9762\u7aef | Electron + React | Electron + Vue |\n| \u7ec4\u4ef6\u5e93 | Ant Design\u3001MUI | Element Plus\u3001Ant Design Vue |\n| \u7c7b\u578b\u652f\u6301 | TS \u539f\u751f\u53cb\u597d | Vue 3 + TS \u8f83\u597d |\n\n---\n\n## \u5341\u4e00\u3001\u9ad8\u9891\u9762\u8bd5\u9898\n\n### Q1\uff1aReact \u548c Vue \u6700\u5927\u7684\u533a\u522b\uff1f\n> React \u662f**\u4e0d\u53ef\u53d8\u6570\u636e + \u624b\u52a8 setState**\uff0cVue \u662f**\u54cd\u5e94\u5f0f\u6570\u636e + \u81ea\u52a8\u8ffd\u8e2a**\u3002React \u504f\u51fd\u6570\u5f0f\u3001\u9700\u663e\u5f0f\u4f18\u5316\uff1bVue \u504f\u58f0\u660e\u5f0f\u3001\u7f16\u8bd1\u5668\u5e2e\u505a\u4f18\u5316\u3002\n\n### Q2\uff1aVue \u7684 v-model \u5728 React \u4e2d\u600e\u4e48\u5b9e\u73b0\uff1f\n> React \u6ca1\u6709\u8bed\u6cd5\u7cd6\uff0c\u9700\u624b\u52a8\u4f20 `value` + `onChange`\uff0c\u6216\u7528\u7b2c\u4e09\u65b9\u5e93\u3002\u672c\u8d28\u662f\u53d7\u63a7\u7ec4\u4ef6\u7684\u6a21\u5f0f\u3002\n\n### Q3\uff1aReact \u7684 useEffect \u548c Vue \u7684 watch \u6709\u4ec0\u4e48\u533a\u522b\uff1f\n> useEffect \u662f**\u526f\u4f5c\u7528\u94a9\u5b50**\uff08\u6e32\u67d3\u540e\u6267\u884c\uff09\uff0c\u9700\u624b\u52a8\u58f0\u660e\u4f9d\u8d56\uff1bVue \u7684 watch \u662f**\u58f0\u660e\u5f0f\u76d1\u542c**\uff0c\u4f9d\u8d56\u81ea\u52a8\u8ffd\u8e2a\u3002computed \u66f4\u63a5\u8fd1 useMemo\u3002\n\n### Q4\uff1a\u4e3a\u4ec0\u4e48\u5927\u578b\u9879\u76ee\u9009 React \u66f4\u591a\uff1f\n> \u751f\u6001\u66f4\u4e30\u5bcc\uff08Next.js + TypeScript \u6df1\u5ea6\u6574\u5408\uff09\u3001\u51fd\u6570\u5f0f\u7f16\u7a0b\u5229\u4e8e\u62bd\u8c61\u4e0e\u6d4b\u8bd5\u3001React Native \u8de8\u7aef\u80fd\u529b\u3002\u4f46\u5b9e\u9645\u4e0a\u4e24\u8005\u90fd\u53ef\u4ee5\u652f\u6491\u5927\u578b\u9879\u76ee\u3002\n\n### Q5\uff1aVue 3 \u76f8\u6bd4 Vue 2 \u6700\u5927\u7684\u6539\u8fdb\uff1f\n> Composition API\uff08\u903b\u8f91\u590d\u7528\uff09\u3001Proxy \u54cd\u5e94\u5f0f\u3001\u66f4\u597d\u7684 TS \u652f\u6301\u3001Tree-shaking \u51cf\u80a5\u3002\n\n---\n\n*\u6574\u7406\u65f6\u95f4\uff1a2026-06-03*\n", "17-Vue\u8fdb\u9636": "# Vue \u8fdb\u9636\u9762\u8bd5\u7b14\u8bb0\n> \u57fa\u7840\u54cd\u5e94\u5f0f\u539f\u7406\u89c1 `05-Vue\u54cd\u5e94\u5f0f.md`\n\n---\n\n## \u4e00\u3001Composition API \u6df1\u5165\n\n### setup vs Options API\n\n```vue\n\n\n\n\n\n```\n\n### \u4e3a\u4ec0\u4e48\u5f15\u5165 Composition API\uff1f\n\n| \u95ee\u9898 | Options API | Composition API |\n|------|-------------|-----------------|\n| \u903b\u8f91\u590d\u7528 | Mixin\uff08\u547d\u540d\u51b2\u7a81/\u6765\u6e90\u4e0d\u6e05\uff09 | \u81ea\u5b9a\u4e49 Hook\uff08composables\uff09 |\n| \u4ee3\u7801\u7ec4\u7ec7 | \u6309\u9009\u9879\u62c6\u5206\uff08data/methods/watch \u5272\u88c2\uff09 | \u6309\u529f\u80fd\u805a\u5408\uff08\u76f8\u5173\u4ee3\u7801\u5728\u4e00\u8d77\uff09 |\n| TS \u652f\u6301 | \u5dee | \u597d |\n\n### composables\uff08\u81ea\u5b9a\u4e49 Hook\uff09\n\n```js\n// useMouse.js\nexport function useMouse() {\n const x = ref(0)\n const y = ref(0)\n function update(e) { x.value = e.pageX; y.value = e.pageY }\n onMounted(() => window.addEventListener('mousemove', update))\n onUnmounted(() => window.removeEventListener('mousemove', update))\n return { x, y }\n}\n\n// \u4f7f\u7528\nconst { x, y } = useMouse()\n```\n\n---\n\n## \u4e8c\u3001\u7ec4\u4ef6\u901a\u4fe1\u5927\u5168\n\n### 1. props / emits\n\n```vue\n\n\n\n\n\n```\n\n### 2. provide / inject\n\n```js\n// \u7956\u5148\nprovide('theme', 'dark')\n\n// \u540e\u4ee3\nconst theme = inject('theme')\n```\n\n### 3. v-model \u53cc\u5411\u7ed1\u5b9a\n\n```vue\n\n\n\n\n\n\n\n\n```\n\n### 4. ref + defineExpose\n\n```vue\n\n\n\n\n\n// childRef.value.reset()\n```\n\n### 5. \u4e8b\u4ef6\u603b\u7ebf\uff08\u4e0d\u63a8\u8350\uff09\n\n\u5c0f\u578b\u9879\u76ee\u53ef\u7528 `mitt` \u5e93\u505a\u7b80\u5355\u7684\u4e8b\u4ef6\u603b\u7ebf\u3002\n\n---\n\n## \u4e09\u3001\u63d2\u69fd\uff08Slot\uff09\n\n```vue\n\n Hello \n\n\n\n\n \u5934\u90e8 \n \u9ed8\u8ba4 \n \u5e95\u90e8 \n\n\n\n\n {{ item }} \n\n```\n\n---\n\n## \u56db\u3001Vue Router\n\n```js\nconst routes = [\n {\n path: '/user/:id',\n component: () => import('@/views/User.vue'), // \u61d2\u52a0\u8f7d\n meta: { requiresAuth: true },\n children: [/* \u5d4c\u5957\u8def\u7531 */]\n }\n]\n\n// \u5bfc\u822a\u5b88\u536b\nrouter.beforeEach((to, from) => {\n if (to.meta.requiresAuth && !token) return '/login'\n})\n```\n\n| \u5bf9\u6bd4 | hash | history |\n|------|------|---------|\n| URL | `/#/page` | `/page` |\n| \u539f\u7406 | hashchange \u4e8b\u4ef6 | History API (pushState) |\n| \u90e8\u7f72 | \u65e0\u9700\u670d\u52a1\u7aef\u914d\u7f6e | \u9700\u670d\u52a1\u7aef\u652f\u6301\uff08404 \u56de\u9000\u5230 index.html\uff09 |\n\n---\n\n## \u4e94\u3001Pinia\n\n```js\n// \u5b9a\u4e49 Store\nexport const useUserStore = defineStore('user', () => {\n const user = ref(null)\n const isLogin = computed(() => !!user.value)\n\n async function login(credentials) {\n user.value = await api.login(credentials)\n }\n\n return { user, isLogin, login }\n})\n\n// \u4f7f\u7528\nconst store = useUserStore()\nstore.login({ name, password })\n```\n\n### Pinia vs Vuex\n\n| \u5bf9\u6bd4 | Pinia | Vuex |\n|------|-------|------|\n| \u4f53\u79ef | ~1KB | \u8f83\u5927 |\n| TS \u652f\u6301 | \u539f\u751f | \u9700\u989d\u5916\u7c7b\u578b\u58f0\u660e |\n| Mutation | \u65e0\uff08\u76f4\u63a5\u6539 state\uff09 | \u6709 |\n| \u6a21\u5757 | \u591a\u4e2a\u72ec\u7acb store | modules \u5d4c\u5957 |\n| \u5b98\u65b9 | Vue 3 \u5b98\u65b9\u63a8\u8350 | Vue 2 \u5b98\u65b9 |\n\n---\n\n## \u516d\u3001KeepAlive\n\n```vue\n\n\n \n\n\n\n\n```\n\n---\n\n## \u4e03\u3001nextTick\n\n```js\n// \u6570\u636e\u53d8\u66f4\u540e\uff0cDOM \u8fd8\u6ca1\u66f4\u65b0\ncount.value++\nconsole.log(document.getElementById('num').textContent) // \u65e7\u503c\n\nawait nextTick()\n// DOM \u5df2\u66f4\u65b0\nconsole.log(document.getElementById('num').textContent) // \u65b0\u503c\n```\n\n> Vue \u7684 DOM \u66f4\u65b0\u662f**\u5f02\u6b65\u6279\u5904\u7406**\uff0c\u540c\u4e00\u4e8b\u4ef6\u5faa\u73af\u5185\u7684\u591a\u6b21\u6570\u636e\u53d8\u66f4\u53ea\u89e6\u53d1\u4e00\u6b21\u66f4\u65b0\u3002\n\n---\n\n## \u516b\u3001\u9ad8\u9891\u9762\u8bd5\u9898\n\n### Q1\uff1aMixin \u6709\u4ec0\u4e48\u95ee\u9898\uff1fComposition API \u5982\u4f55\u89e3\u51b3\uff1f\n> Mixin\uff1a\u547d\u540d\u51b2\u7a81\u3001\u6765\u6e90\u4e0d\u660e\u3001\u9690\u5f0f\u4f9d\u8d56\u3002Composition API\uff1a\u663e\u5f0f\u5f15\u5165\u3001\u51fd\u6570\u4f5c\u7528\u57df\u9694\u79bb\u3001TS \u53cb\u597d\u3002\n\n### Q2\uff1av-if \u548c v-show \u7684\u533a\u522b\uff1f\n> `v-if` \u63a7\u5236 DOM \u7684**\u5b58\u5728**\uff08\u771f\u6b63\u7684\u6761\u4ef6\u6e32\u67d3\uff09\uff0c\u5207\u6362\u5f00\u9500\u5927\uff1b`v-show` \u63a7\u5236 `display`\uff08\u59cb\u7ec8\u6302\u8f7d\uff09\uff0c\u521d\u59cb\u6e32\u67d3\u5f00\u9500\u5927\u3002\u9891\u7e41\u5207\u6362\u7528 v-show\u3002\n\n### Q3\uff1av-for \u4e3a\u4ec0\u4e48\u5fc5\u987b\u52a0 key\uff1f\n> key \u662f\u865a\u62df DOM \u7684\u552f\u4e00\u6807\u8bc6\uff0c\u5e2e\u52a9 diff \u7b97\u6cd5\u9ad8\u6548\u590d\u7528/\u79fb\u52a8 DOM \u8282\u70b9\u3002\u4e0d\u7528 index \u4f5c key \u56e0\u4e3a\u5217\u8868\u987a\u5e8f\u53d8\u5316\u65f6 index \u4e0d\u7a33\u5b9a\u3002\n\n### Q4\uff1aVue \u7ec4\u4ef6 data \u4e3a\u4ec0\u4e48\u5fc5\u987b\u662f\u51fd\u6570\uff1f\n> \u8fd4\u56de\u5bf9\u8c61\u7684\u5f15\u7528\u4f1a\u88ab\u6240\u6709\u5b9e\u4f8b\u5171\u4eab\u3002\u51fd\u6570\u8fd4\u56de\u65b0\u5bf9\u8c61\uff0c\u6bcf\u4e2a\u5b9e\u4f8b\u72ec\u7acb\u4e00\u4efd\u6570\u636e\u3002\n\n### Q5\uff1awatch \u548c computed \u7684\u9009\u62e9\uff1f\n> computed\uff1a\u4f9d\u8d56\u53d8\u5316\u65f6**\u8fd4\u56de**\u65b0\u503c\uff0c\u6709\u7f13\u5b58\uff0c\u4e0d\u6267\u884c\u526f\u4f5c\u7528\u3002watch\uff1a\u6570\u636e\u53d8\u5316\u65f6**\u6267\u884c**\u64cd\u4f5c\uff08API \u8bf7\u6c42\u3001DOM \u64cd\u4f5c\u7b49\u526f\u4f5c\u7528\uff09\u3002\n\n---\n\n*\u6574\u7406\u65f6\u95f4\uff1a2026-06-03*\n"};
let currentId = null;
let sidebarOpen = false;
// 渲染侧边栏
function renderList(filter = '') {
const list = document.getElementById('note-list');
const filtered = NOTES.filter(n =>
n.title.toLowerCase().includes(filter.toLowerCase()) ||
n.id.includes(filter)
);
list.innerHTML = filtered.map(n => `
`).join('');
}
// 加载笔记内容（内嵌版，无需 fetch）
function loadNote(id) {
currentId = id;
const note = NOTES.find(n => n.id === id);
if (!note || !NOTES_CONTENT[id]) return;
document.getElementById('topbar-title').textContent = note.title;
const html = renderMarkdown(NOTES_CONTENT[id]);
document.getElementById('content').innerHTML = `
${note.title}
整理时间：${note.date}
${html}
`;
document.querySelectorAll('.sidebar-item').forEach(el => {
el.classList.toggle('active', el.getAttribute('href') === '#' + id);
});
if (window.innerWidth <= 768) toggleSidebar(false);
window.scrollTo(0, 0);
}
// 简单 Markdown 渲染器
function renderMarkdown(md) {
let html = md;
// 代码块
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
'' + escapeHtml(code.trim()) + '
'
);
// 行内代码
html = html.replace(/`([^`]+)`/g, '$1');
// 标题
html = html.replace(/^#### (.+)$/gm, '$1
');
html = html.replace(/^### (.+)$/gm, '$1
');
html = html.replace(/^## (.+)$/gm, '$1
');
html = html.replace(/^# (.+)$/gm, '$1
');
// 粗体
html = html.replace(/\*\*(.+?)\*\*/g, '$1');
// 表格
html = html.replace(/\|(.+)\|\n\|[-| :]+\|\n([\s\S]*?)(?=\n\n|\n###|\n##|\n#|$)/g, (match) => {
const lines = match.trim().split('\n');
if (lines.length < 2) return match;
const headers = lines[0].split('|').filter(c => c.trim()).map(c => `${c.trim()} | `).join('');
const rows = lines.slice(2).map(line => {
const cells = line.split('|').filter(c => c.trim()).map(c => `${c.trim()} | `).join('');
return `${cells}
`;
}).join('');
return ``;
});
// 列表
html = html.replace(/^[\s]*[-*] (.+)$/gm, '$1');
html = html.replace(/(.*<\/li>)/s, '');
// 引用
html = html.replace(/^> (.+)$/gm, '$1
');
// 分隔线
html = html.replace(/^---$/gm, '
');
// 段落：将未包裹的文本行转为
html = html.replace(/^(?!<[a-z])(.+)$/gm, '
$1
');
return html;
}
function escapeHtml(str) {
return str.replace(/&/g,'&').replace(//g,'>');
}
function filterNotes(val) {
renderList(val);
}
function toggleSidebar(force) {
sidebarOpen = force !== undefined ? force : !sidebarOpen;
document.getElementById('sidebar').classList.toggle('open', sidebarOpen);
document.getElementById('overlay').classList.toggle('show', sidebarOpen);
}
// 路由处理
function init() {
renderList();
const hash = location.hash.slice(1);
if (hash) {
loadNote(hash);
}
}
window.addEventListener('hashchange', () => {
const hash = location.hash.slice(1);
if (hash) loadNote(hash);
});
init();
![](\"real.jpg\")
\n\n\nconst Home = () => import('@/views/Home.vue')\n\n\n